<template>
  <view id="score">
    <view class="status_bar">
      <!-- 这里是状态栏 -->
    </view>
    <view class="topbox">
      <image
        src="@/static/user/leftwhite.png"
        @click="backuser()"
        class="left"
        mode="widthFix"
      />
      <view class="topson">
        <view class="tsleft">
          <image src="@/static/user/qian.png" class="qian" mode="widthFix" />
          <view class="qiantit">{{ score }}</view>
          <view class="qianscore">积分</view>
          <image
            src="@/static/user/rightbai.png"
            class="rightbai"
            mode="widthFix"
          />
        </view>
        <view class="tsright">
          <view class="rightlabel">兑换记录</view>
        </view>
      </view>
      <view class="sign">
        <!-- <view class="signtit">连续签到赚积分</view> -->
        <view class="stepsbox">
          <uni-section title="连续签到赚积分" type="line" padding>
            <uni-steps
              :options="list1"
              :active="active"
              active-color="#FBB714"
            />
          </uni-section>
        </view>
        <button class="signbut" @click="signup()">签到</button>
        <view class="signtext" @click="tosignday()">查看签到日历</view>
      </view>
    </view>
    <view style="height: 23vh"></view>
    <!-- banner图 -->
    <image src="@/static/user/banner.png" class="banner" mode="widthFix" />
    <!-- banner图 -->
    <!-- 奈雪好券 -->
    <view class="conpon">
      <view class="conpontit">
        <view class="conpontitleft">奈雪好券</view>
        <image
          src="@/static/index/rightcircle.png"
          class="conpontitright"
          mode="widthFix"
        />
      </view>
      <view class="conponbody">
        <view class="conponson" v-for="(item, i) in conponlist" :key="i">
          <image :src="ensureHttp(item.image)" class="quan" />
          <view class="contit">{{ item.name }}</view>
          <view class="conscore"
            ><text style="color: #c2c364; margin-right: 10rpx">{{
              item.need
            }}</text
            >积分</view
          >
          <view class="connum">剩余{{ item.inventory }}件</view>
        </view>
      </view>
    </view>
    <!-- 奈雪好券 -->
  </view>
</template>


<script setup>
import { computed, reactive, ref, onMounted } from "vue";
import { useStore } from "vuex";
import { integral } from "../../request/API/user";
import { ensureHttp } from "../../utils/public";

const store = useStore();
const score = computed(() => store.state.userdata.score);

const active = ref(0);
const conponlist = ref([
  //   {
  //   tit:'软欧包免费券',
  //   num:'800',
  //   odd:'99665'
  // },{
  //   tit:'买一送一券',
  //   num:'800',
  //   odd:'97377'
  // },{
  //   tit:'吃了牛逼券',
  //   num:'800',
  //   odd:'78945'
  // },
]);
const list1 = ref([
  {
    title: "1天",
    icon: "home",
    status: "success",
  },
  {
    title: "2天",
    icon: "home",
    status: "success",
  },
  {
    title: "3天",
    icon: "home",
    status: "success",
  },
  {
    title: "4天",
    icon: "home",
    status: "success",
  },
  {
    title: "5天",
    icon: "home",
    status: "success",
  },
  {
    title: "6天",
    icon: "home",
    status: "success",
  },
  {
    title: "7天",
    icon: "home",
    status: "success",
  },
]);
//页面加载时触发
onMounted(() => {
  // 接口
  integral()
    .then((res) => {
      conponlist.value = res.data;
      console.log(conponlist.value, 333);
    })
    .catch((err) => {
      console.log(err);
    });
});

//签到
const signup = () => {
  active.value = active.value + 1;
  if (active.value > 6) {
    active.value = 0;
  }
};
// 跳转
const backuser = () => {
  uni.navigateBack({
    delta: 1,
  });
};
const tosignday = () => {
  uni.navigateTo({
    url: "/pages/user/signday",
  });
};
</script>


<style lang="scss">
#score {
  width: 100%;
  background-color: #f0f8fa;
  .status_bar {
    height: var(--status-bar-height);
    width: 100%;
    background-color: #c4d234;
  }
  .topbox {
    width: 100%;
    height: 35vh;
    background-color: #c4d234;
    position: relative;
    .left {
      width: 50rpx;
      margin: 30rpx;
    }
    .topson {
      width: 100%;
      display: flex;
      justify-content: space-between;
      margin-top: 60rpx;
      .tsleft {
        display: flex;
        align-items: center;
        margin-left: 20rpx;
        .qian {
          width: 60rpx;
        }
        .qiantit {
          font-size: 2.5rem;
          font-weight: bold;
          color: #fff;
          margin-left: 10rpx;
        }
        .qianscore {
          font-size: 0.8rem;
          margin-left: 10rpx;
          color: white;
          margin-top: 30rpx;
        }
        .rightbai {
          margin-left: 10rpx;
          margin-top: 30rpx;
          width: 20rpx;
        }
      }
      .tsright {
        display: flex;
        align-items: center;
        .rightlabel {
          display: inline-block;
          background-color: #fff;
          font-size: 1rem;
          color: #c4d234;
          padding: 10rpx;
          padding-left: 30rpx;
          border-top-left-radius: 30rpx;
          border-bottom-left-radius: 30rpx;
          box-sizing: border-box;
        }
      }
    }
    .sign {
      position: absolute;
      width: 94%;
      aspect-ratio: 1.5;
      background-color: #fff;
      top: 30%;
      left: 50%;
      transform: translate(-50%, 50%);
      border-radius: 16rpx;
      box-shadow: #b3b8be 0rpx 0rpx 10rpx;
      padding: 30rpx;
      box-sizing: border-box;
      .signbut {
        width: 60%;
        margin-top: 15rpx;
        border-radius: 50rpx;
        color: white;
        background-color: #c4d234;
      }
      .signtext {
        margin-top: 20rpx;
        color: #c4d234;
        text-align: center;
      }
    }
  }
  .banner {
    width: 94%;
    margin: auto;
    display: flex;
    justify-content: center;
  }
  .conpon {
    width: 94%;
    margin: auto;
    .conpontit {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 20rpx;
      .conpontitleft {
        font-size: 38rpx;
        color: #5a5c5b;
      }
      .conpontitright {
        width: 50rpx;
      }
    }
    .conponbody {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      margin-top: 20rpx;
      .conponson {
        width: 48%;
        background-color: #fff;
        border-radius: 16rpx;
        padding: 20rpx;
        box-sizing: border-box;
        margin-bottom: 30rpx;
        .quan {
          width: 100%;
          display: flex;
          justify-content: center;
          margin: auto;
          margin-top: 60rpx;
          margin-bottom: 60rpx;
          margin: 0;
        }
        .contit {
          font-size: 40rpx;
          font-weight: bold;
          color: #52565c;
        }
        .conscore {
          font-size: 30rpx;
          color: #9da1a4;
          margin-top: 15rpx;
        }
        .connum {
          font-size: 30rpx;
          color: #9da1a4;
        }
      }
    }
  }
}
</style>
